import React from 'react'
import './ZxSelect.css'
import {withRouter} from 'react-router-dom'
class ZxSelect extends React.Component{
    constructor(){
        super()
        this.state={
            value:'',
            // data1:[
            //     {shop_type_id:1,sort_type_name:'中餐'},
            //     {shop_type_id:2,sort_type_name:'外卖'},
            //     {shop_type_id:3,sort_type_name:'没事'},
            //     {shop_type_id:4,sort_type_name:'果蔬'}
            // ]
        }
    }
    handleSubmit(e){
        if (this.state.value == '') {
            alert('未选择')
        } else {
            alert('你的选择是' + this.state.value);
            e.preventDefault(); // 阻止默认行为，在提交之前需要验证的时候先拦截一下
        }
    }
    /* select下拉列表的的双向数据绑定===获得下拉列表里面的数据 */
    handleChange(e){
        this.setState({
            value:e.target.value
        })
    }
    /* 点击提交的时候==退回到store界面==同时提交选好的店铺类型 */
    submit(){
        this.props.history.push( '/Home/MyStore') 
    }
    render(){
        // console.log(this.props.data)
//         if(this.state.data.length){
//             this.state.data.map(item=>{
//                 return(
//                     <select name="" id="" onChange={this.handleChange.bind(this)}> 
//                     <option value="未选择">请选择</option>
//                     <option value={item.sort_type_name}></option>
//                     </select>
//                 )
//             })
//         }else{
//             return (
// <option value="暂无选择"></option>
//             )
//         }
        return(
            <div className='formSelectBox'>
                <form action="" 
                onSubmit={this.handleSubmit.bind(this)}>
                    <label htmlFor="">店铺类型：</label>
                        {this.props.data.length && 
                            <select name="" id="" onChange={this.handleChange.bind(this)}>            
                            <option value="未选择">请选择</option>
                        {this.props.data.map((item,index)=>{
                            return <option 
                                    value={item.sort_type_name} 
                                    key={item.shop_type_id}>{item.sort_type_name}
                                    </option>
                        })}
                           </select>
                    }
                    {this.props.data.length===0 && <option value="暂无选择"></option>}
                    <input type="submit" value='提交' onClick={this.submit.bind(this)}/>
                </form>
            </div>
        )
    }
}

export default withRouter(ZxSelect)